<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <meta charset="UTF-8">
    <title>选手表格</title>
    <style>
        .table11_6 table {
            width: 100%;
            margin: 15px 0;
            border: 0;
        }

        .table11_6 th {
            background-color: #96C7ED;
            color: #000000
        }

        .table11_6, .table11_6 th, .table11_6 td {
            font-size: 0.95em;
            text-align: center;
            padding: 4px;
            border-collapse: collapse;
        }

        .table11_6 th, .table11_6 td {
            border: 1px solid #73b4e7;
            border-width: 1px 0 1px 0;
            border: 2px inset #ffffff;
        }

        .table11_6 tr {
            border: 1px solid #ffffff;
        }

        .table11_6 tr:nth-child(odd) {
            background-color: #dcecf9;
        }

        .table11_6 tr:nth-child(even) {
            background-color: #ffffff;
        }
    </style>
    <script type="text/javascript">

        $(function () {

            // ajaxT();

            $('#myForm').submit(function (event) {
                // 阻止表单默认提交行为
                event.preventDefault();
                ajaxT(postData);
            });

            //$('#reset').click(function(event) {
            // 阻止表单默认提交行为
            //    vent.preventDefault();
            //    var postData = {
            //       name: ''
            //};
            //    ajaxT(postData);
            //});
        });

        function ajaxT(postData) {

            var url = "http://localhost:80/player/getPage";
            url = url.concat("?pageSize=10", "&pageNo=1")

            var postData = {
                name: $('input[name=name]').val()
            };

            $.ajax({
                    type: "POST",
                    contentType: "application/json", //必须这样写
                    url: url,
                    data: JSON.stringify(postData),
                    datatype: "JSON",
                    success: function (result) {
                        console.log(JSON.stringify(result));
                        createTable(result.data.records);
                    }
                }
            );
        }

        //动态的创建一个table
        function createTable(data) {

            var tableStr = "<table class=table11_6>";
            tableStr = tableStr
                + "<th width='5%'>序号</td>"
                + "<th width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
                + "<th width='10%'>姓名</td>"
                + "<th width='10%'>国家</td>"
                + "<th width='10%'>年龄</td>"
                + "<th width='10%'>世界排名</td>"
                + "<th width='10%'>排名赛冠军</td>"
                + "<th width='10%'>三大赛冠军</td>"
                + "<th width='15%'>创建时间</td>"
                + "<th width='15%'>更新时间</td>"
                + "</tr>"

            var len = data.length;
            if (len === 0) {
                tableStr = tableStr + "<tr style='text-align: center'>"
                    + "<td cols pan='6'><font color='#cd0a0a'>" + "暂无记录" + "</font></td>"
                    + "</tr>";
            } else {
                for (var i = 0; i < len; i++) {
                    tableStr = tableStr + "<tr>"
                        + "<td>" + (i + 1) + "</td>"
                        + "<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='" + data[i].key + "' /></td>"
                        + "<td>" + data[i].name + "</td>"
                        + "<td>" + data[i].nation + "</td>"
                        + "<td>" + data[i].age + "</td>"
                        + "<td>" + data[i].ranking + "</td>"
                        + "<td>" + data[i].titles + "</td>"
                        + "<td>" + data[i].threeCrowns + "</td>"
                        + "<td>" + data[i].updateTime + "</td>"
                        + "<td>" + data[i].updateTime + "</td>"
                        + "</tr>";
                }
            }
            tableStr = tableStr + "</table>";
            //添加到div中
            $("#tableAjax").html(tableStr);
        }

    </script>
</head>

<body>
<div align="center">
    <form>
        <table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0">
            <tr>
                <td width="600px" colspan="2" align="center"><h3>查看选手信息</h3></td>
            </tr>
            <tr>
                <td width="200px">英文姓名：</td>
                <td width="400px">
                    <input width="350px" type="text" th:value="${player!=null}?${player.enName}"/>
                </td>
            </tr>
            <tr>
                <td width="200px">中文姓名：</td>
                <td width="400px">
                    <input width="350px" type="text" th:value="${player!=null}?${player.chName}"/>
                </td>
            </tr>
            <tr>
                <td width="200px">绰号：</td>
                <td width="400px">
                    <input width="350px" type="text" th:value="${player!=null}?${player.nickName}"/>
                </td>
            </tr>
            <tr>
                <td>国家：</td>
                <td>
                    <input width="350px" type="text" th:value="${player!=null}?${player.nation}"/>
                </td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td>
                    <input width="350px" type="text" th:value="${player!=null}?${player.age}"/>
                </td>
            </tr>
            <tr>
                <td>排名：</td>
                <td>
                    <input width="350px" type="text" th:value="${player!=null}?${player.ranking}"/>
                </td>
            </tr>
            <tr>
                <td>排名赛数量：</td>
                <td>
                    <input width="350px" type="email" th:value="${player!=null}?${player.titles}"/>
                </td>
            </tr>
            <tr>
                <td>三大赛冠军数量：</td>
                <td>
                    <input width="350px" type="email" th:value="${player!=null}?${player.threeCrowns}"/>
                </td>
            </tr>

        </table>
        <button type="submit" name="submit_form">提交</button>
    </form>
</div>

</body>
</html>
